<script setup lang="ts">
import SafeTopContainer from '@/components/SafeTopContainer/SafeTopContainer.vue'
import useUserStore from '@/store/modules/user.ts'
import { formatTime } from '@/utils/day.ts'
import { uploadFile } from '@/utils/upload.ts'

const toast = useToast()
const showFullText = ref(false)
const vinNo = ref('')
const orderCode = ref('')
const message = useMessage()
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
onLoad((res) => {
  console.log(res)
  if (res?.vinNo) {
    vinNo.value = res.vinNo
    orderCode.value = res.orderCode
  }
})
async function signatureConfirm(res: any) {
  if (res.success) {
    if (orderCode.value) {
      message.confirm({
        title: '提示',
        msg: '是否绑定为永久签名？',
      }).then(() => {
        generatePermanentSignature(res, true)
      }).catch(() => {
        generateTemporarySignature(res)
      })
    }
    else {
      generatePermanentSignature(res, false)
    }
  }
}

// 永久签名
async function generatePermanentSignature(res, isTemporary = false) {
  const result = await uploadFile({
    url: '/ucar/customer/uploadCustomerSign',
    filePath: res.tempFilePath,
  })
  if (result.code === 200) {
    if (isTemporary) {
      toast.success({
        msg: '永久签名绑定成功,请重新支付',
        duration: 2000,
        closed: () => {
          uni.navigateBack()
        },
      })
    }
    else {
      toast.success({
        msg: '永久签名绑定成功',
        duration: 2000,
        closed: () => {
          uni.navigateBack()
        },
      })
    }
  }
  else {
    toast.error('签名上传失败')
  }
}

// 临时签名
async function generateTemporarySignature(res) {
  const result = await uploadFile({
    url: '/ucar/order/uploadOrderSign',
    filePath: res.tempFilePath,
    formData: {
      orderCode: orderCode.value,
    },
  })
  if (result.code === 200) {
    toast.success({
      msg: '临时签名绑定成功,请重新支付',
      duration: 2000,
      closed: () => {
        uni.navigateBack()
      },
    })
  }
}
</script>

<template>
  <safe-top-container :padding-bottom="15" bg-color="#fff" :show-bg-color="true">
    <wd-navbar left-arrow custom-class="!bg-transparent" :title="vinNo ? '临时签名' : '绑定签名'" :bordered="false" @click-left="navigateBack" />
  </safe-top-container>
  <div class="signature-container mt-3 h-full bg-white">
    <div class="signature-box pb-10 text-sm text-gray-800 leading-relaxed">
      <wd-collapse v-model="showFullText" viewmore :line-num="13">
        <p class="mb-3">
          致：XX车行（以下简称“贵公司”）
        </p>
        <p>
          本人承诺本人通过(□购买；□受赠；□继承；□其他）方式合法占有本车辆（即本次提供的车辆行驶证所对应的车辆，以下简称“车辆”）为该车辆所有权人，为开展二手车交易，本人有权作出如下授权：
        </p>
        <p>
          （1）本人同意贵公司可为进行二手车交易/金融等目的将所收集的与本人车辆相关的信息（包括车架号、车辆行驶证信息等）提供给与贵公司具有合作关系的机构，以协助贵公司开展与本人的二手车交易/金融等有关事项。
        </p>
        <p>
          （2）本人同意上述与贵公司具有合作关系机构可为协助贵公司开展二手车交易/金融等目的使用上述信息并基于此目的收集、提供本人车辆的相关信息（包括车辆的保险及出险信息等），并对上述信息进行加工、分析后形成针对车辆情况的结果数据、分析报告以方便贵公司查询、评估车辆情况，协助贵公司开展与本人的二手车交易/金融等有关事项。
          本授权书的授权期限为自本人签署之日起至本人书面表示不再同意之日止。本授权书是本人做出的单方承诺，效力具有独立性，不因本人与贵公司签订的相关合同解除、终止、被撤销、无效而丧失法律效力。
          本人承诺：在开展二手车交易过程中（包括交易前或交易后等全过程）所提供的所有信息及承诺均真实、准确、完整、合法、有效，并保证上述全部授权内容均经过所有信息权利人的充分、完全认可。如果由于本人提供的信息或承诺不真实、不准确、不完整、不合法，本人承担由此所导致的后果和全部法律责任。本人已经仔细阅读本授权书全部内容，对本授权书所有条款的含义及相应的法律后果已全部知晓并充分理解。
        </p>
        <p>车架号：{{ vinNo }}</p>
        <p>查询时间：{{ formatTime(new Date(), 'YYYY年MM月DD日') }}</p>
      </wd-collapse>
      <div class="mt-5 p-2">
        <template v-if="userInfo?.signFileUrl">
          <p class="mb-2">
            已签名图片：
          </p>
          <div class="h-30 w-full">
            <img :src="userInfo?.signFileUrl" class="h-full w-full object-contain">
          </div>
        </template>

        <p class="mb-2">
          签名处:
        </p>
        <wd-signature
          :export-scale="2" background-color="#ffffff" enable-history pressure :height="200"
          @confirm="signatureConfirm"
        >
          <template #footer="{ clear, confirm, currentStep, restore, revoke, historyList }">
            <view class="w-screen space-y-6">
              <!-- 第一行按钮，靠右 -->
              <view class="flex justify-end">
                <wd-button size="small" plain :disabled="currentStep <= 0" @click="revoke">
                  撤回
                </wd-button>
                <wd-button size="small" plain :disabled="currentStep >= historyList.length" @click="restore">
                  恢复
                </wd-button>
                <wd-button size="small" plain @click="clear">
                  清除
                </wd-button>
              </view>

              <!-- 第二行按钮，居中且 block -->
              <view class="flex justify-center">
                <wd-button type="primary" size="large" block custom-class="!w-[95%]" :round="false" :disabled="historyList.length <= 0" @click="confirm">
                  提交
                </wd-button>
              </view>
            </view>
          </template>
        </wd-signature>
      </div>
      <!--      <div class="mt-5 flex items-center justify-center"> -->
      <!--        <wd-button type="primary" size="large" block custom-class="!w-[95%]" :round="false"> -->
      <!--          提交 -->
      <!--        </wd-button> -->
      <!--      </div> -->
    </div>
  </div>
</template>

<style scoped>
.footer-slot {
  width: 100%;
}

.footer-inner {
  width: 100vw; /* 或 100% */
}
</style>
